<template>
  <div class="app-container">
    <!--工具栏-->
    <div
      v-if="crud.props.searchToggle"
      class="crud-group"
    >
      <!-- 搜索 -->
      <el-input
        v-model="query.scriptPublishName"
        clearable
        size="small"
        placeholder="包名称"
        style="width:200px"
        class="filter-item"
      />
      <el-input
        v-model="query.demandCode"
        clearable
        size="small"
        placeholder="发布编码"
        style="width:200px"
        class="filter-item"
      />
      <el-date-picker
        v-model="query.onlineDate"
        type="date"
        value-format="yyyy-MM-dd"
        placeholder="选择上线日期"
      />
      <rrOperation :crud="crud" />
    </div>
    <crudOperation :permission="permission" />
    <!--表格渲染-->
    <el-table
      ref="table"
      v-loading="crud.loading"
      :data="crud.data"
      @select="crud.selectChange"
      @select-all="crud.selectAllChange"
      @selection-change="crud.selectionChangeHandler"
    >
      <el-table-column
        type="selection"
        width="55"
      />
      <el-table-column
        v-if="columns.visible('scriptPublishName')"
        label="包名称"
        prop="scriptPublishName"
      />
      <el-table-column
        v-if="columns.visible('scriptPackName')"
        label="扫描任务名称"
        prop="scriptPackName"
      />
      <el-table-column
        v-if="columns.visible('appointClusterName')"
        label="指定集群名称"
        prop="appointClusterName"
      />
      <el-table-column
        v-if="columns.visible('demandCode')"
        label="发布编码"
        prop="demandCode"
        width="150"
      />
      <el-table-column
        v-if="columns.visible('onlineDate')"
        label="上线日期"
        prop="onlineDate"
      />
      <el-table-column
        v-if="columns.visible('createBy')"
        label="创建人"
        prop="createBy"
        width="100"
      />
      <el-table-column
        v-if="columns.visible('createTime')"
        label="创建时间"
        prop="createTime"
        width="140"
      />
      <el-table-column label="查看详情">
        <template slot-scope="scope">
          <el-button
            type="text"
            size="small"
            @click="showDetail(scope.row)"
          >扫描情况</el-button>
          <el-button
            type="text"
            size="small"
            @click="showPublish(scope.row)"
          >发布信息</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--分页组件-->
    <div class="pagination-container">
      <pagination />
    </div>

    <check-result
      v-if="checkResultDialogVisible"
      :pack-task-id="scriptPackTaskId"
      :dialog-visible="checkResultDialogVisible"
      @close="closeDetail"
    />

    <publish-task
      v-if="publishTaskFlag"
      :dialog-visible="publishTaskFlag"
      :publish-version-id="this.scriptPublishVersionId"
      @close="closePublishTask"
    />
  </div>
</template>

<script>
import CRUD, { presenter, header, form, crud } from '@crud/crud'
import rrOperation from '@crud/RR.operation'
import crudOperation from '@crud/extend/script/publish/CRUD.operation'
import pagination from '@crud/Pagination'
import checkResult from './scanList/index'
import publishTask from './publishTask/index'
import scriptPublishVersionApi from '@/api/script/publish/scriptPublishVersion'

// crud交由presenter持有
const defaultCrud = CRUD({title: '脚本发布任务', url: 'api/scriptPublish/version/page', crudMethod: { ...scriptPublishVersionApi }})
const defaultForm = {
  scriptPublishingName: null,
  onlineDate: null,
  demandCode: null,
  version: null,
  publishState: '未发布'
}
export default {
  name: '',
  components: { crudOperation, rrOperation, pagination, checkResult, publishTask },
  mixins: [presenter(defaultCrud), header(), form(defaultForm), crud()],

  data() {
    return {
      checkResultDialogVisible: false,
      scriptPackTaskId: '',
      scriptInfo: '',
      publishTaskFlag: false,
      publishTaskDialogVisible: false,
      scriptPublishVersionId: '',
      permission: {
        add: ['admin', 'scriptPack:add'],
        publish: ['admin', 'scriptPack:publish'],
        del: ['admin', 'scriptPack:del']
      },
      rules: {
        taskName: [
          { required: true, message: '请输入任务名称', trigger: 'blur' }
        ],
        requirementCode: [
          { required: true, message: '请输入需求编码', trigger: 'blur' }
        ],
        publishDate: [
          { required: true, message: '请输入选择发布日期', trigger: 'blur' }
        ]
      },
      queryForm: {
        name: '',
        code: ''
      }
    }
  },
  created(){
    this.crud.resetQuery(true)
  },
  methods: {
    closeDetail() {
      this.checkResultDialogVisible = false
      this.crud.cancelCU()
    },
    closePublishTask() {
      this.crud.cancelCU()
      this.publishTaskFlag = false
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    handleRemove(file, fileList) {
      console.log(file, fileList)
    },
    handlePreview(file) {
      console.log(file)
    },
    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length
        } 个文件`
      )
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`)
    },
    showDetail(raw) {
      this.scriptPackTaskId = raw.packTaskId
      this.checkResultDialogVisible = true
    },
    showPublish(raw) {
      this.scriptPublishVersionId = raw.id
      this.publishTaskFlag = true
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
::v-deep.el-upload-dragger .el-upload__text {
  font-size: 8px;
  padding: 0px 10px;
}

::v-deep.el-upload-dragger {
  width: 760px;
}

.upload-demo {
  text-align: center;
}
</style>
